import React, { Component } from 'react';
import { StyleSheet, View, Dimensions, Text, Image, TextInput, TouchableOpacity } from "react-native";
import { style } from '../../../../theme/style';
import { ParentBox } from './ParentBox';
import { Common } from '../../../../component/common/Common';

const ScreenWidth = Dimensions.get('window').width;
const scale = ScreenWidth / 375;

export class SelectCpt extends ParentBox {
	constructor(props) {
		super(props);
		this.state = {
			isModal: false,
			data: props.data
		}
	}

	componentWillReceiveProps (props) {
		if (props) {
			this.setState({
				data: props.data
			})
		}
	}


	_selectCallBack = (selectIndex) => {
		let { callBack } = this.props || {}
		let { data } = this.state || {}
		let { listData, id } = data || {};
		data.value = listData[selectIndex].dictKey;
		this.setState({
			isModal: false,
			data
		}, () => {
			callBack && callBack({ [id]: listData[selectIndex].dictKey });
			/* if(id==='sendMode'&&data.value==='0'){
				callBack && callBack({ [id]: listData[selectIndex].dictKey,sendTime:null });
			}else{
				callBack && callBack({ [id]: listData[selectIndex].dictKey });
			} */
		})
	}
	_toggle = () => {
		let { isModal } = this.state;
		this.setState({
			isModal: !isModal
		})
	}

	//获取name值
	_getName = () => {
		let { data } = this.state;
		let { listData, value } = data || {};
		let name = '';
		let index = -1;
		listData && listData.forEach((item, i) => {
			if (item.dictKey == value) {
				name = item.dictName;
				index = i;
			}
		})
		return { name, index };
	}

	_content = () => {
		let { timeOpen } = this.props;
		let { data } = this.state;
		let { title, placeholder, listData, value, id, sendTime } = data || {};
		let { isModal } = this.state || {};
		console.log('render-刷新', data, this._getName().name, this._getName().index)
		let name = this._getName().name;
		let index = this._getName().index;
		return (
			<View>
				<TouchableOpacity style={styles.selectBox} onPress={this._toggle}>
					<Text style={styles.name}>{title}: </Text>
					<Text style={[styles.value, name ? null : styles.init]}>{name || placeholder}</Text>
					<Image source={require('../../../../imgs/arrow.png')} style={styles.selectImg} />
				</TouchableOpacity>
				{
					(id === 'sendMode' && value == '2') ? (<TouchableOpacity style={styles.timeBox} onPress={() => { timeOpen && timeOpen() }}>
						<Text style={styles.sendTime}>预期发送时间:</Text>
						<Image style={styles.timeIcon} source={require('../../../../imgs/global/timeSelectIcon.png')} />
						<Text style={styles.expectedSendTimeValue}>{sendTime}</Text>
					</TouchableOpacity>) : null
				}
				<Common type="modal" demoData={(
					<Common type="listRadio" selectIndex={index} title={'请选择' + title} listData={listData} selectCallBack={this._selectCallBack} />
				)} isVisible={isModal} closeCallballFn={() => { this._toggle(false) }} />
			</View>
		)
	}
}

const styles = StyleSheet.create({
	selectBox: {
		flexDirection: 'row',
		paddingVertical: 6 * scale
	},
	name: {
		fontSize: 12 * scale
	},
	selectImg: {
		width: 7 * scale,
		height: 14 * scale,
		tintColor: '#333',
		marginRight: 5 * scale
	},
	value: {
		width: 220 * scale,
		textAlign: 'right',
		fontSize: 12 * scale,
		color: '#000',
		fontWeight: 'bold',
		marginRight: 15 * scale
	},
	init: {
		color: '#999'
	},
	sendTime: {
		fontSize: 12 * scale,
	},
	timeIcon: {
		tintColor: style.color.themeColor,
		width: 17 * scale,
		height: 20 * scale,
		marginRight: 10 * scale,
		marginLeft: 30 * scale
	},
	expectedSendTimeValue: {
		fontWeight: 'bold',
		color: '#000'
	},
	timeBox: {
		flexDirection: 'row',
		marginTop: 5 * scale,
		alignItems: 'center'
	}
})